<template>
  <view class="withdrawal-record-container">

  <view class="withdrawal-record-page">
    <!-- 筛选区域 -->
    <view class="filter-container">
      <view class="filter-item">
        <text class="filter-label">状态:</text>
        <picker @change="bindStatusChange" :value="statusIndex" :range="statusOptions">
          <view class="picker">
            {{ statusOptions[statusIndex] }}
            <uni-icons type="down" size="14" color="#888"></uni-icons>
          </view>
        </picker>
      </view>
      <view class="filter-item">
        <text class="filter-label">时间:</text>
        <view class="date-picker-group">
          <picker mode="date" @change="bindStartDateChange" :value="startDate">
            <view class="picker">
              {{ startDate || '开始日期' }}
            </view>
          </picker>
          <text class="separator">至</text>
          <picker mode="date" @change="bindEndDateChange" :value="endDate">
            <view class="picker">
              {{ endDate || '结束日期' }}
            </view>
          </picker>
        </view>
      </view>
      <view class="filter-button" @click="resetFilter">
        <text>重置</text>
      </view>
    </view>

    <!-- 列表区域 -->
    <view class="record-list">
      <view class="record-item" v-for="(item, index) in recordList" :key="index">
        <view class="item-header">
          <text class="withdrawal-id">提现ID: {{ item.withdrawal_id }}</text>
          <text class="status-tag"
            :class="{ 
              'wait-user-confirm': item.state === 'WAIT_USER_CONFIRM', 
              'accepted': item.state === 'ACCEPTED', 
              'processing': item.state === 'PROCESSING', 
              'transfering': item.state === 'TRANSFERING', 
              'success': item.state === 'SUCCESS', 
              'fail': item.state === 'FAIL', 
              'canceling': item.state === 'CANCELING', 
              'cancelled': item.state === 'CANCELLED' 
            }">{{
              getStatusText(item.state) }}</text>
        </view>
        <view class="item-body">
          <view class="amount-box">
            <text class="amount">¥{{ item.amount }}</text>
          </view>
          <view class="info-row">
            <text class="label">提现方式:</text>
            <text class="value">{{ getPaymentMethod(item) }}</text>
          </view>
          <view class="info-row">
            <text class="label">申请时间:</text>
            <text class="value">{{ item.create_time }}</text>
          </view>
          <view class="info-row" v-if="item.update_time">
            <text class="label">处理时间:</text>
            <text class="value">{{ item.update_time }}</text>
          </view>
          <view class="info-row" v-if="item.out_bill_no">
            <text class="label">交易单号:</text>
            <text class="value">{{ item.out_bill_no }}</text>
          </view>
          <!-- 确认收款按钮 -->
          <view class="confirm-payment-btn" v-if="item.state === 'WAIT_USER_CONFIRM' && item.package_info" @click="confirmPayment(item)">
            <text>确认收款</text>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="recordList.length === 0 && !loading">
        <image class="empty-image" :src="getFullImageUrl('@/static/image/empty.png')" mode="aspectFit"></image>
        <text class="empty-text">暂无提现记录</text>
      </view>

      <!-- 加载中 -->
      <view class="loading-state" v-if="loading"> 
        <view class="loading-spinner"></view>
        <text>加载中...</text>
      </view>
    </view>

    <!-- 分页加载 -->
    <u-load-more :status="loadMoreStatus" @clickLoadMore="loadMore"></u-load-more>
  </view>
  </view>
</template>


<script src="./withdrawalRecord.js"></script>

<style lang="scss" src="./withdrawalRecord.scss"></style>
